<template>
  <div class="home">
    <div class="headerImg">
      <div class="imgBox">
        <van-image
          width="375px"
          height="250px"
          fit="cover"
          :src="require('../assets/img/timg1.jpg')"
        />
      </div>
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <div class="swipe_top">
              <p>吉福灯</p>
              <p>大雄宝殿-如来佛祖</p>
            </div>
            <div class="swipe_message">
              <div class="leight_num">
                <p class="tit">当前点亮</p>
                <p class="num">9盏</p>
              </div>
              <div class="person_num">
                <p class="tit">祈福人数</p>
                <p class="num">29999</p>
              </div>
            </div>
            <div class="swipe_bottom">
              <van-image
                width="88px"
                height="48px"
                fit="cover"
                :src="require('../assets/img/12pin.png')"
              />
              <p class="handleFu">前往祈福</p>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swipe_top">
              <p>吉福灯</p>
              <p>大雄宝殿-如来佛祖</p>
            </div>
            <div class="swipe_message">
              <div class="leight_num">
                <p class="tit">当前点亮</p>
                <p class="num">9盏</p>
              </div>
              <div class="person_num">
                <p class="tit">正在祈福</p>
                <p class="num">心想事成，万事如意</p>
              </div>
            </div>
            <div class="swipe_bottom">
              <van-image
                width="88px"
                height="48px"
                fit="cover"
                :src="require('../assets/img/12pin.png')"
              />
              <div class="times">
                <p>祈福时间剩余</p>
                <span>00:24:20</span>
              </div>
            </div>
          </van-swipe-item>
          <van-swipe-item>
            <div class="swipe_top">
              <p>吉福灯</p>
              <p>大雄宝殿-如来佛祖</p>
            </div>
            <div class="swipe_message">
              <div class="leight_num">
                <p class="tit">预计等待</p>
                <p class="num">9分钟</p>
              </div>
              <div class="person_num">
                <p class="tit">祈福人数</p>
                <p class="num">999</p>
              </div>
            </div>
            <div class="swipe_bottom">
              <van-image
                width="88px"
                height="48px"
                fit="cover"
                :src="require('../assets/img/12pin.png')"
              />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="temple_active">
      <h3>寺庙活动</h3>
      <ul>
        <li>
          <van-image
            radius="15"
            width="85px"
            height="85px"
            fit="cover"
            :src="require('../assets/img/timg1.jpg')"
          />
          <div class="active_right">
            <p class="active_title">加蓝菩萨圣诞</p>
            <p class="active_content">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Reiciendis commodi quisquam dolor ex quaerat eos officia quod
              aspernatur, nesciunt aliquam, repellendus consectetur corporis eum
              iusto enim. Maiores consequuntur eligendi sit.
            </p>
            <div class="active_bottom">
              <span>2020-07-15 14:35</span>
              <p>报名参加</p>
            </div>
          </div>
        </li>
        <li>
          <van-image
            radius="15"
            width="85px"
            height="85px"
            fit="cover"
            :src="require('../assets/img/timg1.jpg')"
          />
          <div class="active_right">
            <p class="active_title">加蓝菩萨圣诞</p>
            <p class="active_content">
              鸠摩罗什寺举行舌舍利塔修复开光仪式2013年6月9日,甘肃武威千年古刹鸠摩罗什寺举行了舌舍利塔的修复开光仪式。距今1600多年的鸠摩罗什舌舍利塔是第五次大规模修缮
            </p>
            <div class="active_bottom">
              <span>2020-07-15 14:35</span>
              <p>报名参加</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="temple_active">
      <h3>好文推荐</h3>
      <ul>
        <li>
          <van-image
            radius="15"
            width="85px"
            height="85px"
            fit="cover"
            :src="require('../assets/img/timg1.jpg')"
          />
          <div class="active_right">
            <p class="active_title">加蓝菩萨圣诞</p>
            <p class="active_content">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Reiciendis commodi quisquam dolor ex quaerat eos officia quod
              aspernatur, nesciunt aliquam, repellendus consectetur corporis eum
              iusto enim. Maiores consequuntur eligendi sit.
            </p>
            <div class="active_bottom">
              <span>2020-07-15 14:35</span>
            </div>
          </div>
        </li>
        <li>
          <van-image
            radius="15"
            width="85px"
            height="85px"
            fit="cover"
            :src="require('../assets/img/timg1.jpg')"
          />
          <div class="active_right">
            <p class="active_title">加蓝菩萨圣诞</p>
            <p class="active_content">
              鸠摩罗什寺举行舌舍利塔修复开光仪式2013年6月9日,甘肃武威千年古刹鸠摩罗什寺举行了舌舍利塔的修复开光仪式。距今1600多年的鸠摩罗什舌舍利塔是第五次大规模修缮
            </p>
            <div class="active_bottom">
              <span>2020-07-15 14:35</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getMenuPermission } from "../api/index";
export default {
  name: "home",
  components: {
    // HelloWorld
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.headerImg {
  height: 383px;
  background: pink;
  position: relative;
  .imgBox {
    height: 250px;
    overflow: hidden;
    border-radius: 0 0 50% 50%/0 0 12% 12%;
    box-shadow: 0px 1px 14px 0px rgba(4, 0, 0, 0.4);
  }
  .swiper {
    width: 286px;
    height: 200px;
    border-radius: 17px;
    background: #fff;
    position: absolute;
    top: 126px;
    left: 14px;
    box-shadow: 0px 1px 7px 0px rgba(4, 0, 0, 0.11);
    padding: 20px 30px;
    font-weight: bolder;

    .van-swipe-item {
      width: 286px;
    }
    .swipe_top {
      p {
        color: #260100;
        font-size: 20px;
        line-height: 28px;
      }
    }
    .swipe_message {
      display: flex;
      line-height: 18px;
      font-size: 12px;
      margin-top: 37px;
      margin-bottom: 26px;
      .leight_num {
        margin-right: 17px;
      }
      .tit {
        color: #565454;
      }
      .num {
        color: #000000;
      }
    }
    .swipe_bottom {
      display: flex;
      justify-content: space-between;
      .handleFu {
        margin-top: 12px;
        font-size: 12px;
        color: #fff;
        width: 93px;
        height: 32px;
        background: linear-gradient(
          90deg,
          rgba(251, 97, 109, 1) 0%,
          rgba(255, 181, 37, 1) 100%
        );
        box-shadow: 0px 1px 4px 0px rgba(4, 0, 0, 0.39);
        border-radius: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        text-align: center;
        line-height: 32px;
      }
      .times {
        padding: 5px 0;
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        text-align: right;
        line-height: 20px;
      }
    }
  }
}
.temple_active {
  padding: 0 16px;
  h3 {
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
    line-height: 16px;
    margin-top: 15px;
  }
  ul > li {
    padding: 18px 0;
    display: flex;
    border-bottom: 1px solid #d9d9d9;
    .active_right {
      margin-left: 15px;
      width: 244px;
      .active_title {
        font-size: 16px;
        color: #000000;
        font-weight: bolder;
      }
      .active_content {
        text-overflow: ellipsis;
        overflow: hidden;
        width: 244px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 12px;
        font-family: Microsoft YaHei;
        color: #555;
        line-height: 16px;
        margin: 8px 0;
      }
      .active_bottom {
        display: flex;
        justify-content: space-between;
        span {
          font-size: 10px;
          font-family: Microsoft YaHei;
          color: #555555;
          line-height: 25px;
        }
        p {
          width: 73px;
          height: 25px;
          background: linear-gradient(
            90deg,
            rgba(251, 97, 109, 1) 0%,
            rgba(255, 181, 37, 1) 100%
          );
          box-shadow: 0px 1px 4px 0px rgba(4, 0, 0, 0.39);
          border-radius: 11px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 25px;
          text-align: center;
          color: #fff;
        }
      }
    }
  }
  ul > li:last-of-type {
    border-bottom: 0;
  }
}
</style>
